<template>
    <!-- <MessageBox :bbo="boolc" /> -->
    <!--  消息提示框  修改地址  centerDialogVisible   v-model="sddVisible" :getBoolEdit = "sddVisible" :getBoolEdit = "sddVisible"  myDuix ? sddVisible :theSonFr -->
    <EditAddress @sonValue="myDuix" v-model="sddVisible"  />

    <!--  消息提示框  物流进度  -->
    <el-dialog v-model="centerJ" title="物流进度" width="50%" align-center>
        <!-- <div style="height: 100%"> -->

            <el-steps :active="1" direction="vertical" >
                <!-- 遍历渲染 -->
                <el-step v-for="(item , index) in takeOn" :key="'onWuLiuValue' + index"  :title="item.context" :description="item.time"  :icon="LocationFilled"/>
                <!-- <el-icon><LocationFilled /></el-icon> -->
                <!-- <el-step finish-status ></el-step> -->
            </el-steps>

        <!-- </div> -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerJ = false">取消</el-button>
                <el-button type="primary" @click="centerJ = false">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- <el-card class="box-card" :style="{ width: '100%'}"> -->
    <!-- 查找输入框 -->
    <div class="mt-4" :style="{width:'400px', marginBottom:'15px'}">
        <el-input v-model="searchKey" placeholder="请输入内容" class="input-with-select" size="large" >
            <template #append>
                <el-button :icon="Search" />
            </template>
        </el-input>
    </div>

    <!-- main -->
    <!-- 分页器显示指定的行数 ，为当前页面位置数值 减 1 再乘以单页最多显示的行数 ，以退为进，就可以得出当前页面的显示行数 -->
    <el-table :data="tableData.slice((currentPage4-1)*pageSize4 , currentPage4*pageSize4)" border style="width: 100%">
        <el-table-column prop="thisIndex" label="#" width="45px">
        </el-table-column>
        <el-table-column prop="num" label="订单编号">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180">
        </el-table-column>
        <el-table-column prop="IsPayed" label="是否付款" width="180" >
            <!-- duix.IsPayed = (payMo==0) ? "未付款":"已付款"   -->
            <!--  v-for="(item , index) in monis" :key="'onMonis' + index"  -->
<!--             
            <span
                :style="{backgroundColor:'#F56C6C',borderRadius: '4px',color:'#fff',padding:'3px 6px',fontSize:'7px'}">未付款</span> -->
        </el-table-column>
        <el-table-column prop="WhTheLivery" label="是否发货">
        </el-table-column>
        <el-table-column prop="PlaceTheOrderOfTime" label="下单时间">
        </el-table-column>
        <el-table-column label="操作" width="130">
            <el-tooltip content="修改地址" placement="top">
                <el-button :style="{fontSize:'7px',width:'45px',backgroundColor:'#409EFF'}"
                    @click="()=>{
                        sddVisible = true
                    }">
                    <el-icon size="15px" color="#fff">
                        <EditPen />
                    </el-icon>
                </el-button>
            </el-tooltip>
            <el-tooltip content="物流信息" placement="top">
                <el-button :style="{fontSize:'7px',width:'45px',backgroundColor:'#67C23A'}" @click="centerJ = true">
                    <el-icon size="15px" color="#fff">
                        <LocationInformation />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="demo-pagination-block" :style="{marginTop:'15px'}">
        <!-- @size-change	    page-size 改变时触发    -->
        <!-- @current-change	current-page 改变时触发 -->
        <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>



    <!-- </el-card> -->
</template>

<!-- 表格内容 -->
<script setup lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import EditAddress from "./module/EditAddress.vue";
import type { FormInstance, FormRules } from 'element-plus'

// 导入 配置好的axio
import { orderList } from "../../api/Order";
import { kuaidiList } from "../../api/Kuaidi";
// import mitts from "./module/mitt";
// 里面有 物流信息的 图标
import { Edit, LocationFilled } from '@element-plus/icons-vue'

// import { number } from 'echarts';
// import { isNumberTypeAnnotation } from '@babel/types';
// const mysh = ref(123456)
// const handleClick = () => {
//     mitts.emit('handleChange',)
// }

// mitts.on('handleChange', (val) => {
//     mysh.value = val as number
// })


// 修改地址的弹出框  父组件原本控制 子组件：修改地址组件
const sddVisible = ref(false)
// console.log(sddVisible.value)

// 子传父  传递过来的值可以不用以下操作，可以直接进行使用
// let theSonFr = ref()
const myDuix =(e:any)=>{
    sddVisible.value = e.value   //false
    console.log("收到从子组件传来的：", sddVisible.value);
}




// 物流进度 
// 弹出框
const centerJ = ref(false)



const searchKey = ref('')


// 分页器
// 当前显示的页面位置
const currentPage4 = ref<number>(1)
// 单页最多显示的行数
let pageSize4 = ref<any>(10)
// 是否使用小型分页样式
const small = ref(false)
// 是否为分页按钮添加背景色
const background = ref(false)
// 	是否禁用分页
const disabled = ref(false)

// (currentPage-1)*pageSize,currentPage*pageSize)
// console.log(tableData.slice((currentPage4.value-1)*pageSize4.value , currentPage4.value*pageSize4.value))
// 动态更改单页最多显示的行数
const handleSizeChange = (newPage: number) => {
    pageSize4 = newPage

}

// 当前 显示的页码
const handleCurrentChange = (val: number) => {
    currentPage4.value = val
}

// 接口约束
interface tableDataInterface {
    thisIndex: number;
    num: string;
    price: number;
    IsPayed: string;
    WhTheLivery: string;
    PlaceTheOrderOfTime: string;
}[]

// 将数组变成响应式数组 reactive([])
let tableData: Array<tableDataInterface> = reactive([])

// 毫秒转换为年月日时分秒
function getSpeTime(timeStr: any) {
    // timeStr是毫秒值
    // 获取年份
    var year = new Date(timeStr).getFullYear();
    //获取月份，获取的月份比实际小1，所以需要+1
    var month = new Date(timeStr).getMonth() + 1;
    //获取日
    var date = new Date(timeStr).getDate();
    //获取时
    var hours = new Date(timeStr).getHours();
    //获取分
    var minutes: any = new Date(timeStr).getMinutes();
    if (minutes < 10) {
        minutes = '0' + minutes
    }
    //获取秒
    var seconds: any = new Date(timeStr).getSeconds();
    if (seconds < 10) {
        seconds = '0' + seconds
    }
    //组合格式为年-月-日 时：分：秒（2022-6-6 12:12:12）
    return year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
}

let tableBox

// 是否付款    响应式数组
let monis:any =  reactive([])
let litel:any = reactive([])

let orders = async (val: any) => {

    let res = await orderList({
        // 当前所在的页数位置 ，默认为 第 1 页
        pagenum: currentPage4.value,
        // 请求的总行数
        pagesize: 30
        // pagesize: val ?  val : pageSize4.value
    })
    // console.log(res)
    // 是否已付款
    let payAll = res.data.data.goods
    let thisIndex: any = 0
    let price = 0
    let num = ''
    let IsPayed = ''
    let WhTheLivery = ''
    let PlaceTheOrderOfTime = ''

    for (let inx = 0; inx < payAll.length; inx++) {
    // console.log(payAll[inx].pay_status)
        litel = payAll[inx].pay_status
        let duix: any = {
            thisIndex,
            num,
            price,
            IsPayed,
            WhTheLivery,
            PlaceTheOrderOfTime
        }
        // 下标
        duix.thisIndex = inx + 1
        // // 价格
        duix.price = payAll[inx].order_price
        // 订单编号
        duix.num = payAll[inx].order_number
        // 是否付款
        let payMo = payAll[inx].pay_status
        duix.IsPayed = (payMo == 0) ? "未付款" : "已付款"
        // 是否发货
        duix.WhTheLivery = payAll[inx].is_send
        // 下单时间
        // var times = new Date(payAll[inx].create_time);	

        duix.PlaceTheOrderOfTime = getSpeTime(payAll[inx].create_time)

        // console.log(duix)  litel
        // 将 duix对象 插入到tableData数组当中
        // litel.push(payAll[inx].pay_status)
        tableData.push(duix)
        monis.push((payMo == 0) ? "未付款" : "已付款")
        
    }
    // console.log(litel)

    // console.log(tableData)
    // console.log(payAll);
    // const myMoni = ()=>{
    //     console.log( monis)
    // }
    // myMoni()
    // return myMoni
}
// 实参必须为空！
orders('')
// orders.myMoni()




let arrSh: any = []


// 物流信息
let takeOn: any = []
// let takeOnee = {
//     Edit
// }
let kuaidi = async () => {
    let res = await kuaidiList({
        // 根据 快递单号 获取相应的数据
        myid: 1106975712662,
    })
    // 将请求的数据，传到自定义的数组里面
    takeOn.push(...res.data.data)
    // takeOn.indexOf(0,Edit)
    // takeOn[0].push(takeOnee)

    // console.log(takeOn)
    // 
}
// console.log(takeOn)
kuaidi()
// 由于在 kuaidi()函数里面异步获取到的代码是无法在外面的同步代码进行获取的
</script>
    





<style scoped lang='scss' >
// .el-form-item__content .example-block .el-cascader .el-input {
//     width: 100%;
// }

// 消息提示框
.dialog-footer button:first-child {
    margin-right: 10px;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 100%;
}


// 文字提示
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

// 分页器
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>

  